<template>
  <div class="system-notice">
    <el-card class="notice-header">
      <div class="btn">
        <div class="btn-left">
          <span>处理状态：</span>
          <el-button size="small">未读通知</el-button>
          <el-button size="small">已读通知</el-button>
        </div>
        <div class="btn-right">
          <el-button type="text">一键全部已读</el-button>
        </div>
      </div>
    </el-card>
    <el-card class="notice-footer">
      <div class="notice" @click="handleDetail">
        <div class="notice-left">
          <div class="img"></div>
        </div>
        <div class="notice-right">
          <div class="left">
            <div class="title">
              <!-- <el-badge is-dot class="item">远大科技系统通知</el-badge> -->
              <div class="item">远大科技系统通知</div>
              <div class="badge"></div>
            </div>
            <span
              >求市无治论本五调党律种况料习连民变论特美比等越计争数们示规青南合美步空今速维养党火正四将类争第因作流可料都那见保选图元它就素自。</span
            >
          </div>
          <div class="right">
            <div>2022-11-16</div>
            <span>发布人 张三</span>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="notice" @click="handleDetail">
        <div class="notice-left">
          <div class="img"></div>
        </div>
        <div class="notice-right">
          <div class="left">
           <div class="title">
              <!-- <el-badge is-dot class="item">远大科技系统通知</el-badge> -->
              <div class="item">远大科技系统通知</div>
              <div class="badge"></div>
            </div>
            <span
              >求市无治论本五调党律种况料习连民变论特美比等越计争数们示规青南合美步空今速维养党火正四将类争第因作流可料都那见保选图元它就素自。</span
            >
          </div>
          <div class="right">
            <div>2022-11-16</div>
            <span>发布人 张三</span>
          </div>
        </div>
      </div>
    </el-card>
    <pagination :total.sync="total" :page.sync="page" :limit.sync="pageSize" layout=" total,sizes,prev, pager, next, jumper"></pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  name: "systemNotice",
  data(){
    return{
      total:20,
      page:1,
      pageSize:10
    }
  },
  components: {
    Pagination,
  },
  methods: {
    handleDetail() {
      this.$router.push("/noticeDetail");
    },
  },
};
</script>

<style lang="scss">
.system-notice {
  .notice-header {
    margin: 20px 36px 20px 28px;
    background: #e7f4ff;
    height: 60px;
    .btn {
      display: flex;
      justify-content: space-between;
      .btn-left {
        span {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
  .notice-footer {
    margin: 20px 36px 20px 28px;
    .notice {
      .notice-left {
        .img {
          width: 50px;
          height: 50px;
          background: #008fff;
          border-radius: 50%;
          margin-right: 20px;
          display: inline-block;
          background-image: url(../../../assets/images/tongzhi.png);
          background-size:100% 100%;
        }
      }
      .notice-right {
        display: flex;
        justify-content: space-between;
        .left {
          font-size: 14px;
          .title{
            display: flex;
            .item {
            font-weight: bold;
            margin-top: 10px;
            margin-right: 6px;
          }
          .badge{
            width:8px;
            height: 8px;
            background: #E02020;
            border-radius: 50%;
            margin-top: 16px;
          }
          }
          span {
            color: #777;
          }
        }
        .right {
          color: #333;
          font-size: 14px;
        }
      }
    }
  }
}
</style>